<!--
 * @Description: tab标签组件
-->
<template>
  <div class="_ehl_mul_tabs">
    <div
      :class="['_ehl_left_arrow', { disabled: page === 1 }]"
      v-if="showNextIcon === true"
      title="向前一页"
      @click="leftTagsPageChange"
      ><i class="el-icon-d-arrow-left"></i>
    </div>
    <div class="_ehl_item_box" ref="barparent">
      <div
        :class="['_ehl_item', { _ehl_item_select: value.contain(item, id_p) }]"
        :style="{ ...tagsWidthStyle, cursor: 'pointer' }"
        v-for="(item, index) in list.slice(
          0 + (page - 1) * size,
          size + (page - 1) * size,
        )"
        @click="itemClick(item, index)"
        :key="index"
      >
        <slot :name="`multabs`" :data="{ item, index, key: id_p, labelKey: name_p }">
          <div class="_ehl_item_label" :title="item[name_p]">{{ item[name_p] }} </div>
        </slot>
      </div>
    </div>
    <div
      class="_ehl_left_arrow"
      :class="{ disabled: page === Math.ceil(list.length / size) }"
      v-if="showNextIcon === true"
      title="向后一页"
      @click="rightTagsPageChange"
      ><i class="el-icon-d-arrow-right"></i>
    </div>
  </div>
</template>

<script>
  export default {
    name: '',
    props: {
      value: { type: Array, default: () => [] },
      list: { type: Array, default: () => [] },
      //标签最小宽度
      minWidth: { type: Number, default: () => 100 },
      //标签最大宽度
      maxWidth: { type: Number, default: () => 150 },
      //标签切换图标是否显示
      showNextIcon: { type: Boolean, default: () => true },
      //value的key映射
      prop: { type: Object, default: () => ({ name: 'name', id: 'id' }) },
    },
    data() {
      return {
        page: 1,
        size: 0, //一页多少个
        name_p: this.prop.name,
        id_p: this.prop.id,
      }
    },
    watch: {
      list() {
        this.calculateSize()
      },
    },
    computed: {
      tagsWidthStyle() {
        let tmp_min = this.minWidth
        let tmp_max = this.maxWidth
        if (this.minWidth > this.maxWidth) {
          tmp_min = tmp_max
        }
        return {
          'min-width': tmp_min + 'px',
          'max-width': tmp_max + 'px',
        }
      },
    },
    created() {},
    destroyed() {
      window.onresize = null
    },
    mounted() {
      this.calculateSize()
      window.addEventListener('resize', () => this.calculateSize(), false)
    },
    beforeDestroy() {
      window.removeEventListener('resize', () => this.calculateSize(), false)
    },
    activated() {
      this.calculateSize()
    },
    methods: {
      calculateSize() {
        this.size = 0
        this.$nextTick(() => {
          this.size = parseInt(
            this.$refs.barparent.clientWidth /
              (this.minWidth > this.maxWidth ? this.maxWidth : this.minWidth + 10),
          )
          if (
            this.list.slice(
              0 + (this.page - 1) * this.size,
              this.size + (this.page - 1) * this.size,
            ).length === 0
          ) {
            this.page > 2 && this.page--
          }
          // console.log('multabs', this.$refs.barparent.clientWidth, this.size)
        })
      },
      itemClick(item, index) {
        let tmp = JSON.parse(JSON.stringify(this.value))
        if (tmp.contain(item, this.id_p)) {
          tmp = tmp.filter(i => {
            return i[this.id_p] !== item[this.id_p]
          })
        } else {
          tmp.push(item)
        }
        this.$emit('input', tmp)
        this.$emit('tab-click', tmp)
      },
      leftTagsPageChange() {
        if (this.page > 1) {
          this.page--
        }
      },
      rightTagsPageChange() {
        if (this.page < this.list.length / this.size) {
          this.page++
        }
      },
    },
  }
</script>
